<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本信息编辑</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #F5F7FA 0%, #E8F4FD 100%);
      color: #333333;
      min-height: 100vh;
      line-height: 1.6;
    }

    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      padding: 20px;
      position: relative;
      min-height: 80px;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.3);
    }

    .back-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      text-decoration: none;
    }

    .back-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.1);
    }

    .header-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      flex: 1;
      letter-spacing: 0.5px;
    }

    .save-btn {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 10px 20px;
      border-radius: 25px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    .save-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-50%) scale(1.05);
    }

    .save-icon {
      margin-right: 8px;
      font-size: 16px;
    }

    /* 内容区域 */
    .content-container {
      background-color: white;
      margin: 20px 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    /* 表单区域 */
    .form-container {
      padding: 25px;
    }

    .form-title {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      letter-spacing: 0.5px;
      margin-bottom: 25px;
      text-align: center;
    }

    .form-group {
      margin-bottom: 25px;
    }

    .form-label {
      display: block;
      font-size: 15px;
      color: #666;
      font-weight: 500;
      margin-bottom: 12px;
    }

    .form-input {
      width: 100%;
      padding: 15px 18px;
      border: 1px solid #E0E0E0;
      border-radius: 8px;
      font-size: 16px;
      color: #333;
      transition: all 0.3s ease;
      background-color: white;
    }

    .form-input:focus {
      outline: none;
      border-color: #2196F3;
      box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
      background-color: white;
    }

    .form-input:hover {
      border-color: #B0B0B0;
    }

    .form-textarea {
      width: 100%;
      min-height: 100px;
      padding: 15px 18px;
      border: 1px solid #E0E0E0;
      border-radius: 8px;
      font-size: 16px;
      color: #333;
      resize: vertical;
      line-height: 1.6;
      transition: all 0.3s ease;
      background-color: white;
    }

    .form-textarea:focus {
      outline: none;
      border-color: #2196F3;
      box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
      background-color: white;
    }

    .form-textarea:hover {
      border-color: #B0B0B0;
    }

    .form-select {
      width: 100%;
      padding: 15px 18px;
      border: 1px solid #E0E0E0;
      border-radius: 8px;
      font-size: 16px;
      color: #333;
      transition: all 0.3s ease;
      background-color: white;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px;
      padding-right: 40px;
    }

    .form-select:focus {
      outline: none;
      border-color: #2196F3;
      box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
      background-color: white;
    }

    .form-select:hover {
      border-color: #B0B0B0;
    }

    .form-row {
      display: flex;
      gap: 15px;
      align-items: flex-end;
    }

    .form-row .form-group {
      flex: 1;
      margin-bottom: 0;
    }

    /* 表单帮助文本 */
    .form-help {
      font-size: 13px;
      color: #999;
      margin-top: 8px;
      line-height: 1.4;
    }

    /* 表单分组 */
    .form-section {
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid #F0F0F0;
    }

    .form-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
      letter-spacing: 0.5px;
    }

    /* 必填标识 */
    .required {
      color: #FF4444;
      font-size: 12px;
      font-weight: 500;
    }

    /* 添加按钮 */
    .add-btn {
      background: white;
      border: 2px solid #2196F3;
      color: #2196F3;
      padding: 12px 20px;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .add-btn:hover {
      background: #2196F3;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }

    /* 添加区域 */
    .add-area {
      background: white;
      border: 2px dashed #2196F3;
      border-radius: 12px;
      padding: 30px 20px;
      text-align: center;
      color: #2196F3;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .add-area:hover {
      background: rgba(33, 150, 243, 0.05);
      border-color: #1976D2;
      transform: translateY(-2px);
    }

    .add-icon {
      font-size: 16px;
      font-weight: bold;
    }

    /* 按钮区域 */
    .button-container {
      display: flex;
      gap: 15px;
      margin-top: 30px;
      padding-top: 25px;
      border-top: 1px solid #F0F0F0;
    }

    .btn {
      flex: 1;
      padding: 15px 25px;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-primary {
      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
    }

    .btn-secondary {
      background: #F5F5F5;
      color: #666;
      border: 2px solid #E0E0E0;
    }

    .btn-secondary:hover {
      background: #E0E0E0;
      transform: translateY(-2px);
    }

    .btn-icon {
      margin-right: 8px;
      font-size: 16px;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .header {
        padding: 15px;
        min-height: 70px;
      }

      .header-title {
        font-size: 18px;
      }

      .content-container {
        margin: 15px 0;
      }

      .form-container {
        padding: 20px;
      }

      .form-row {
        gap: 10px;
      }

      .form-row .form-group {
        flex: 1;
      }

      .button-container {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="header">
    <button class="back-btn" id="backBtn">
      ←
    </button>
    <div class="header-title">基本信息编辑</div>
    <button class="save-btn" id="saveBtn">
      <span class="save-icon">✓</span> 保存
    </button>
  </div>

  <!-- 内容区域 -->
  <div class="content-container">
    <div class="form-container">
      <div class="form-title">编辑基本信息</div>

      <form id="basicInfoForm">
        <!-- 邀请码 -->
        <div class="form-group">
          <label class="form-label">邀请码</label>
          <input type="text" class="form-input" id="inviteCode" placeholder="邀请码">
          <div class="form-help">请仅持有邀请码的人输入。没有的人保持空栏没有问题。</div>
        </div>

        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">基本信息</div>

          <div class="form-group">
            <label class="form-label">姓名 <span class="required">必须</span></label>
            <input type="text" class="form-input" id="name" value="郭东" required>
          </div>

          <div class="form-group">
            <label class="form-label">出生日期</label>
            <div class="form-row">
              <div class="form-group">
                <select class="form-select" id="birthYear" required>
                  <option value="2000" selected>2000</option>
                  <option value="1999">1999</option>
                  <option value="1998">1998</option>
                  <option value="1997">1997</option>
                  <option value="1996">1996</option>
                  <option value="1995">1995</option>
                </select>
              </div>
              <div class="form-group">
                <select class="form-select" id="birthMonth" required>
                  <option value="1">1</option>
                  <option value="2" selected>2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                </select>
              </div>
              <div class="form-group">
                <select class="form-select" id="birthDay" required>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9" selected>9</option>
                  <option value="10">10</option>
                </select>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">血型</label>
            <select class="form-select" id="bloodType" required>
              <option value="">请选择血型</option>
              <option value="A" selected>A</option>
              <option value="B">B</option>
              <option value="AB">AB</option>
              <option value="O">O</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">住址</label>
            <input type="text" class="form-input" id="address" value="家">
          </div>

          <div class="form-group">
            <label class="form-label">电话号码</label>
            <input type="tel" class="form-input" id="phone" placeholder="请输入电话号码">
          </div>
        </div>

        <!-- 籍贯 -->
        <div class="form-section">
          <div class="section-title">籍贯</div>
          <div class="form-group">
            <input type="text" class="form-input" id="hometown" placeholder="请输入您的籍贯">
          </div>
        </div>

        <!-- 家庭构成 -->
        <div class="form-section">
          <div class="section-title">家庭构成</div>
          <div class="form-group">
            <button type="button" class="add-btn" id="addFamilyBtn">
              <span class="add-icon">+</span> 添加
            </button>
          </div>
        </div>

        <!-- 宠物 -->
        <div class="form-section">
          <div class="section-title">宠物</div>
          <div class="form-group">
            <div class="add-area" id="addPetArea">
              <span class="add-icon">+</span> 添加宠物
            </div>
          </div>
        </div>

        <!-- 工作信息 -->
        <div class="form-section">
          <div class="section-title">工作信息</div>
          <div class="form-group">
            <div class="add-area" id="addWorkArea">
              <span class="add-icon">+</span> 添加工作信息
            </div>
          </div>
        </div>

        <!-- 家庭医生 -->
        <div class="form-section">
          <div class="section-title">家庭医生</div>
          <div class="form-group">
            <div class="add-area" id="addDoctorArea">
              <span class="add-icon">+</span> 添加家庭医生
            </div>
          </div>
        </div>

        <!-- 第二意见 -->
        <div class="form-section">
          <div class="section-title">第二意见</div>
          <div class="form-group">
            <div class="add-area" id="addSecondOpinionArea">
              <span class="add-icon">+</span> 添加第二意见
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

  <script>
    // 返回按钮点击事件
    document.getElementById('backBtn').addEventListener('click', function () {
      if (confirm('确定要离开吗？未保存的修改将丢失。')) {
        window.location.href = '主页.html';
      }
    });

    // 取消按钮
    document.getElementById('cancelBtn').addEventListener('click', function () {
      if (confirm('确定要取消编辑吗？未保存的修改将丢失。')) {
        window.location.href = '主页.html';
      }
    });

    // 保存按钮
    document.getElementById('saveBtn').addEventListener('click', function () {
      document.getElementById('basicInfoForm').dispatchEvent(new Event('submit'));
    });

    // 表单提交
    document.getElementById('basicInfoForm').addEventListener('submit', function (e) {
      e.preventDefault();

      // 获取表单数据
      const formData = {
        inviteCode: document.getElementById('inviteCode').value,
        name: document.getElementById('name').value,
        birthYear: document.getElementById('birthYear').value,
        birthMonth: document.getElementById('birthMonth').value,
        birthDay: document.getElementById('birthDay').value,
        bloodType: document.getElementById('bloodType').value,
        address: document.getElementById('address').value,
        phone: document.getElementById('phone').value,
        hometown: document.getElementById('hometown').value
      };

      // 验证必填字段
      if (!formData.name) {
        alert('请填写姓名！');
        return;
      }

      // 验证手机号格式（如果填写了）
      if (formData.phone) {
        const phoneRegex = /^[\d\-\+\(\)\s]+$/;
        if (!phoneRegex.test(formData.phone)) {
          alert('请输入正确的电话号码！');
          return;
        }
      }

      // 模拟保存数据
      console.log('保存的基本信息:', formData);

      // 显示保存成功提示
      alert('基本信息保存成功！');

      // 跳转回主页
      window.location.href = '主页.html';
    });

    // 添加按钮事件
    document.getElementById('addFamilyBtn').addEventListener('click', function () {
      alert('添加家庭构成功能');
    });

    document.getElementById('addPetArea').addEventListener('click', function () {
      alert('添加宠物功能');
    });

    document.getElementById('addWorkArea').addEventListener('click', function () {
      alert('添加工作信息功能');
    });

    document.getElementById('addDoctorArea').addEventListener('click', function () {
      alert('添加家庭医生功能');
    });

    document.getElementById('addSecondOpinionArea').addEventListener('click', function () {
      alert('添加第二意见功能');
    });

    // 表单字段变化时的视觉反馈
    const formInputs = document.querySelectorAll('.form-input, .form-textarea, .form-select');
    formInputs.forEach(input => {
      input.addEventListener('input', function () {
        this.style.borderColor = '#2196F3';
        this.style.backgroundColor = 'white';
      });
    });
  </script>
</body>

</html>